<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="4">
        <div>
            <span class="title">
              <Icon type="ios-book" size="45"/>字典数据</span>
        </div>
      </Col>
      <Col span="20">
        <div style="float: right">
          <Form ref="" label-position="right" :label-width="65" inline>
            <FormItem label="字典标签:" >
              <Input type="text" placeholder="字典标签" v-model="parameters.dictLabel"/>
            </FormItem>
            <FormItem label="字典值:">
              <Input type="text" placeholder="字典值" v-model="parameters.dictValue"/>
            </FormItem>
            <FormItem :label-width="0">
              <Button type="primary" @click="findButton">查询</Button>
            </FormItem>
            <FormItem :label-width="0" style="margin-left: 10px;">
              <Button type="success" @click="addDictDataButton">新增</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down">
      <Col span="24">
        <Table border :columns="dictDataColumn" :data="dictDataList"></Table>
        <Page :current="parameters.current" :total="total" :page-size="parameters.size"  @on-change="changePageCurrent" @on-page-size-change="changePageSize" show-sizer show-elevator show-total></Page>
      </Col>
    </Row>

    <Modal v-model="addOrUpdteDictData.isShow" :title="addOrUpdteDictData.parameters.dictCode ? '修改用户' : '新增用户'">
      <Form ref="formValidate" :model="addOrUpdteDictData.parameters" :rules="addOrUpdteDictData.ruleValidate" label-position="right" :label-width="80" inline>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="字典标签:" prop="dictLabel">
              <Input v-model="addOrUpdteDictData.parameters.dictLabel" type="text" placeholder="请输入..." />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="字典类型:" prop="dictType">
              <Input v-model="addOrUpdteDictData.parameters.dictType" disabled type="text" placeholder="请输入..."/>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="12">
            <FormItem label="字典值:" prop="dictValue">
              <Input v-model="addOrUpdteDictData.parameters.dictValue" type="text" placeholder="请输入..." />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="本级排序:">
              <InputNumber :max="100000" :min="1" :precision="0" v-model="addOrUpdteDictData.parameters.sort"></InputNumber>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="3">
          <Col span="24">
          <FormItem label="描述:">
            <Input v-model="addOrUpdteDictData.parameters.remark" style="width: 235%" type="textarea" :rows="2" placeholder="请输入..."/>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="addOrUpdteDictData.loading" @click="sendDictType">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {pageDictData,addDictData,updateDictData,deleteDictData} from "../../../api/sys/system/sysDictData";
  import {mapState} from "vuex";

  export default {
    name : 'sysSystemDictData',
    computed:{
      ...mapState([
        'routerParame',
        'dictObject',
        'dictArray'
      ])
    },
    data () {
      return {
        dictType : null,
        dictDataList : [],
        dictDataColumn : [
          {title : '字典标签',key : 'dictLabel',align : 'center',tooltip : true},
          {title : '字典值',key : 'dictValue',align : 'center',tooltip : true},
          {title : '字典类型',key : 'dictType',align : 'center',tooltip : true},
          {title : '描述',key : 'remark',align : 'center',tooltip : true},
          {title : '更新时间',key : 'updatedTime',align : 'center',tooltip : true},
          {title : '操作',align : 'center',minWidth : 220,maxWidth : 220,render : (h,parame) =>{
              var buttons = [];
              buttons.push(h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    this.addOrUpdteDictData.isShow = true;
                    this.addOrUpdteDictData.parameters.dictCode = parame.row.dictCode;
                    this.addOrUpdteDictData.parameters.dictLabel = parame.row.dictLabel;
                    this.addOrUpdteDictData.parameters.dictValue = parame.row.dictValue;
                    this.addOrUpdteDictData.parameters.dictType = parame.row.dictType;
                    this.addOrUpdteDictData.parameters.isSys = parame.row.isSys;
                    this.addOrUpdteDictData.parameters.remark = parame.row.remark;
                    this.addOrUpdteDictData.parameters.sort = parame.row.sort;
                  }
                }
              },'修改'));
              buttons.push(h('Button',{
                props: {
                  type: 'error',
                  size: 'small'
                },
                on : {
                  click : ()=>{
                    this.deleteData(parame.row.dictCode);
                  }
                }
              },'删除'));
              return h('div',{},buttons)
            }}
        ],
        total : 0,
        parameters : {
          current : 1,
          size : 10,
          dictLabel : null,
          dictValue : null,
          dictType : null,
        },
        addOrUpdteDictData :{
          isShow : false,
          loading : false,
          parameters : {
            dictCode : null,
            dictLabel : null,
            dictValue : null,
            dictType : null,
            remark : null,
            sort : 1,
          },
          ruleValidate : {
            dictLabel : { required: true, message: '必填！', trigger: 'change' },
            dictType : { required: true, message: '必填！', trigger: 'change' },
            dictValue : { required: true, message: '必填！', trigger: 'change' },
          }
        }
      }
    },
    mounted(){
      this.dictType = this.routerParame;
      this.findButton();
    },
    methods : {
      findButton(){
        this.parameters.current = 1;
        this.findDictDatas();
      },
      findDictDatas(){
        this.parameters.dictType = this.dictType;
        pageDictData(this.parameters.dictType,this.parameters).then(result=>{
          var data = result.data;
          if(data){
            this.parameters.current = data.current;
            this.total = data.total;
            this.dictDataList = data.records;
          }
        });
      },
      addDictDataButton(){
        this.addOrUpdteDictData.isShow = true;
        this.addOrUpdteDictData.parameters.dictCode = null;
        this.$refs['formValidate'].resetFields();
        this.addOrUpdteDictData.parameters.dictType = this.dictType;
      },
      sendDictType(){
        this.$refs['formValidate'].validate(valid=>{
          this.addOrUpdteDictData.loading = true;
          if(valid){
            if(this.addOrUpdteDictData.parameters.dictCode){
              //修改
              updateDictData(this.addOrUpdteDictData.parameters.dictCode,this.addOrUpdteDictData.parameters).then(result=>{
                  this.$Message.success('修改成功！');
                  this.addOrUpdteDictData.isShow = false;
                  this.addOrUpdteDictData.loading = false;
                  this.findDictDatas();
              },error=>{
                console.info(error);
                this.addOrUpdteDictData.loading = false;
              });
            }else{
              //新增
              addDictData(this.addOrUpdteDictData.parameters).then(result=>{
                  this.$Message.success('新增成功！');
                  this.addOrUpdteDictData.isShow = false;
                  this.addOrUpdteDictData.loading = false;
                  this.findDictDatas();
              },error=>{
                console.info(error);
                this.addOrUpdteDictData.loading = false;
              });
            }
          }else{
            this.addOrUpdteDictData.loading = false;
          }
        });
      },
      deleteData(id){
        deleteDictData(id).then(result=>{
          this.$Message.success('操作成功！');
          this.findDictDatas();
        });
      },
      changePageCurrent(current){
        this.parameters.current = current;
        this.findDictDatas();
      },
      changePageSize(size){
        this.parameters.size = size;
        this.findDictDatas();
      },
    }
  }
</script>

<style scoped>
</style>
